<script setup>
import { getAddressListApi } from "@/api/address";
import { ref, computed } from "vue";
import { useRoute } from "vue-router";
import { checkOrderApi, submitOrderApi } from "@/api/order";
import router from "@/router";

const route = useRoute();
const addressList = ref([]);
const selectedAddress = ref({});
const goodsList = ref([]);
const totalPrice = ref(0);
const balance = ref(0);
const message = ref("");
const phone = ref("");
const personName = ref("");
const getAddressList = async () => {
  const res = await getAddressListApi();
  phone.value = res.data.list[0].phone;
  personName.value = res.data.list[0].name;
  addressList.value = res.data.list;
  selectedAddress.value = res.data.list[0];
};
getAddressList();
const longAddress = computed(() => {
  if (!selectedAddress.value.region) return "";
  const { detail } = selectedAddress.value;
  const { province, city, region } = selectedAddress.value.region;
  return province + city + region + detail;
});
const getOrderList = async () => {
  let res;
  if (route.query.mode === "cart") {
    res = await checkOrderApi(route.query.mode, {
      cartIds: route.query.ids,
    });
  } else {
    res = await checkOrderApi(route.query.mode, {
      goodsId: route.query.goodsId,
      goodsSkuId: route.query.goodsSkuId,
      goodsNum: route.query.goodsNum,
    });
  }

  balance.value = res.data.personal.balance;
  totalPrice.value = res.data.order.orderTotalPrice;
  goodsList.value = res.data.order.goodsList;
};
getOrderList();
const submitOrder = async () => {
  let res;
  if (route.query.mode === "cart") {
    res = await submitOrderApi(route.query.mode, {
      cartIds: route.query.cartIds,
      remark: message.value,
    });
  } else {
    res = await submitOrderApi(route.query.mode, {
      goodsId: route.query.goodsId,
      goodsSkuId: route.query.goodsSkuId,
      goodsNum: route.query.goodsNum,
      remark: message.value,
    });
  }
  showSuccessToast("支付成功");
  router.push("/myorder");
};
</script>

<template>
  <div class="pay">
    <van-nav-bar title="订单结算平台" left-arrow @click-left="$router.back()" />

    <div class="address">
      <div class="left-icon"><i class="iconfont icon-peisong"></i></div>
      <div class="info">
        <p class="top">
          <span>{{ personName }}</span>
          <span>{{ phone }}</span>
        </p>
        <p class="bottom">{{ longAddress }}</p>
      </div>
      <div class="right-icon">
        <i class="iconfont icon-youjiantou"></i>
      </div>
    </div>

    <div class="pay-list">
      <div class="list">
        <div class="goods-item" v-for="item in goodsList">
          <div class="left">
            <img :src="item.goods_image" alt="" />
          </div>
          <div class="right">
            <p class="name">
              {{ item.goods_name }}
            </p>
            <p>
              <span class="count">X{{ item.total_num }}</span>
              <span class="price">￥{{ item.total_pay_price }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="flow-num-box">
        <span>共2件商品，合计：</span>
        <span class="price">￥{{ totalPrice }}</span>
      </div>
      <div class="pay-detail">
        <span>订单总金额</span>
        <span class="price">￥{{ totalPrice }}</span>
      </div>
      <div class="pay-ceil">
        <span>优惠券：</span>
        <span>无优惠券可用</span>
      </div>
      <div class="pay-ceil">
        <span>配送费：</span>
        <span>0.00</span>
      </div>
      <div class="pay-way">
        <span>支付方式</span>
        <div>
          <span
            ><i class="iconfont icon-qianbao"></i> 余额支付（可用￥{{
              balance
            }}元）</span
          >
          <i class="iconfont icon-dagou"></i>
        </div>
      </div>
      <!-- <div class="buytips">
      <textarea name="" id="" rows="5" placeholder="请输入备注内容"></textarea>
    </div> -->
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
      />
    </div>
  </div>

  <div class="footer-fixed">
    <div class="left">
      实付款：<span>￥{{ totalPrice }}</span>
    </div>
    <div class="right" @click="submitOrder">提交订单</div>
  </div>
</template>

<style scoped lang="scss">
.pay {
  padding-bottom: 50px;
}
.address {
  padding: 20px;
  display: flex;
  align-items: center;
  .left-icon {
    margin-right: 15px;
  }
  .info {
    flex: 1;
    .top {
      span:first-child {
        margin-right: 10px;
      }
      margin-bottom: 5px;
    }
  }
  background-image: url("@/assets/bar.png");
  background-size: 50px auto;
  background-position: left bottom;
  background-repeat: repeat-x;
}
.pay-list {
  .list {
    .goods-item {
      height: 120px;
      padding: 10px;
      margin-bottom: 8px;
      display: flex;
      .left {
        margin-right: 8px;
        img {
          width: 100px;
          height: 100px;
        }
      }
      .right {
        flex: 1;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        justify-content: space-between;
        .name {
          word-break: break-all;
        }
        p:nth-child(2) {
          display: flex;
          justify-content: space-between;
          span:nth-child(2) {
            color: red;
          }
        }
      }
    }
  }
  .flow-num-box {
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    .price {
      color: red;
    }
    border-bottom: 1px solid rgb(239, 236, 236);
  }
  .pay-detail {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    .price {
      color: red;
    }
  }
  .pay-ceil {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    .price {
      color: red;
    }
  }
  .pay-way {
    padding: 10px;
    div {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      & > i {
        color: red;
      }
    }
  }
  .buytips {
    textarea {
      border: none;
      width: 100%;
      padding: 10px;
    }
  }
}
.footer-fixed {
  line-height: 45px;
  display: flex;
  width: 100%;
  position: fixed;
  justify-content: space-between;
  bottom: 0;
  .left {
    padding-left: 10px;
    font-size: 13px;
    span {
      color: red;
    }
  }
  .right {
    width: 120px;
    color: white;
    text-align: center;
    background-image: linear-gradient(
      to right,
      #fc0000,
      #fd2822,
      #fd3d38,
      #fb4e4b,
      #f85d5d
    );
  }
}
</style>
